<!-- 自动检测用户登陆情况，若未登陆则显示提示 -->
<template>
	<view class="login-container" v-show="show">
		<view class="show-container">
			<view class="content">
				<uni-notice-bar color="#505050" style="font-size:60rpx" backgroundColor="none" text="服务提示"></uni-notice-bar>
				<view class="app-icon"><image mode="widthFix" src="@/static/app-logo.png"/></view>
				<view class="title">申请获取以下权限</view>
				<view class="remark">为提供更个性化的服务</view>
				<view class="remark">需要获得你的公开信息(昵称，头像)</view>
				<!-- <button type="primary" class="opt-btn" open-type="getUserInfo" @click="getUserInfo()">获取微信信息</button> -->
				<button v-if="canIUseGetUserProfile" :disabled="btnDisabled" class='opt-btn' type="primary" withCredentials="true" lang="zh_CN" @click="getUserProfile"> {{btnTxt}} </button>
				<button v-if="!canIUseGetUserProfile" :disabled="btnDisabled" class='opt-btn' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="getUserProfile"> {{btnTxt}} </button>
			</view>
		</view>
		
	</view>
</template>

<script>
import common from "../common/common.js";
import wxLogin from "../common/wxLogin.js";
import config from "@/common/config.js";
import sharederTools from "@/common/sharederTools.js";
import request from "@/common/request.js";
var that;
export default {
	//auto-loginCheck用于检测用户登陆情况的组件
	//当未登陆时自动弹窗并要求登陆
	data() {
		return {
			show: true,
			url: '/pages/index/index',
			canIUseGetUserProfile: false,
			btnDisabled: false, //按钮是否可操作
			btnTxt: '授权登陆'
		}
	},
	created() {
		that = this;
		const user = common.getLoginUser();
		//console.log(user)
		//console.log("======auto-loginCheck=========")
		if(user && user.id) {
			this.show = false;
		}
		const url = common.getCurrentPage();
		
		// console.log("loginCheck", url)
		
		this.url = url;
		if (wx.getUserProfile) {
		  this.canIUseGetUserProfile = true;
		}
		// console.log("======checkLogin======")
		// console.log(this.canIUseGetUserProfile)
		// console.log(common.getCurrentPage()+"============")
	},
	methods: {
		getUserProfile: function(e) { //canIUseGetUserProfile
			that = this;
			// console.log(e)
			//that.setBtn();
			//that.btnDisabled = true;
			that.btnDisabled = true;
			that.btnTxt = "正在获取授权...";
			//return false;
			wxLogin.wxLoginNew(that.canIUseGetUserProfile, function(res) {
				console.log(res, "=========loginCheck===");
				const userInfo = res.userInfo;
				const nickname = userInfo.nickName;
				const headImgUrl = userInfo.avatarUrl;
				that.login(res.code, res.encryptedData, res.iv, res.from,nickname,headImgUrl);
			})
		},
		login: function(code, encryptedData, iv, from, nickname, headImgUrl) {
			that = this;
			const shareder = sharederTools.loadShare();
			that.btnDisabled = true;
			that.btnTxt = "正在获取授权...";
			const query = {from:from, code: code, encryptedData:encryptedData, iv: iv,
			leaderId: shareder?shareder.id:0, leaderNickname: shareder?shareder.nickname:'',
			leaderOpenid: shareder?shareder.openid:'', leaderUnionid: shareder?shareder.unionid:'', 
			nickname: nickname, headImgUrl: headImgUrl};
			console.log("auto-loginCheck",query);
			that.$request.get("/getUserInfo", query).then((res) => {
				if(res.error) {
					uni.showToast({
						title: res.message, icon: "none"
					})
					that.btnDisabled = false;
					that.btnTxt = "重新获取";
				} else {
					uni.setStorageSync(config.CUR_CUSTOM, res.custom);
					uni.showToast({
						icon:"success",
						title: "授权成功",
						success() {
							common.gotoTargetPage(that.url);
						}
					})
				}
			})
		},
	}
}
</script>

<style>
.login-container {
	width: 100vw; height: 100vh; background-color:rgba(0,0,0,0.5); position: fixed; top:0px; left: 0px;
	align-items: center; justify-content: center;
	display: flex; display: -webkit-flex; z-index: 9999;
}
.show-container {
	width: 80%; border-radius: 25rpx; background: #FFF; padding: 20rpx;
}
view.title {
	line-height: 50rpx; font-size: 40rpx; border-bottom: 1px #e8e8e8 solid; padding-bottom: 16rpx; margin-bottom: 16rpx;
}
view.remark {
	color:#888888; padding-top: 8rpx; font-size: 35rpx; padding-bottom: 8rpx; 
}
.app-icon {
	width: 40%; margin-left: 30%; padding:0px;
}
.app-icon image {
	width: 100%;
}
.opt-btn {
	margin-top: 35rpx;
}
</style>
